<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
/*设置背景图片*/
/*background-attachment 背景固定 scroll 滚动的  fixed 固定的*/
body{background-image:url(images/lighthouse.png);background-attachment:fixed;background-position:center;background-repeat:no-repeat;}
.box1 {
	width: 1000px;
	height: 300px;
	/*背景颜色*/
	background-color: red;
	/*背景图片*/
	background-image: url(images/lighthouse.png);
	/*背景是否重复*/
	background-repeat:no-repeat;
	
}
.box2 {
	width: 1000px;
	height: 300px;
	background-color: red;
	background-image: url(images/lighthouse1.jpg)
}
.box3 {
	background-image: url(images/colorsolid.jpg);
	width: 100px;
	height: 100px;
	/*repeat-x 在x轴上重复  repeat-y在y轴上重复 不重复no-repeat*/
	background-position: 0px -100px;
	background-repeat:no-repeat;
	
}
.box3:hover{
	/*background-position: -100px -100px; 第一个数字是水平的 第二个数字是竖直方向的*/
	background-position: left bottom;
}
;
/*jpg不能透明的图片 png就是可以有透明的图片*/
/*在宽高的情况下 使用背景也可以实现图片的是插入*/
</style>
</head>

<body>
<div class="box3"></div>
<div class="box1"></div>
<br/>
<div class="box2"></div>

<br/>

</body>
</html>
